<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
    <style>
        .c1 {
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div id="root"></div>
</body>
<script type="text/babel">
    const list = [
        { id: 1, name: 'jack', content: 'rose, you jump i jump', time: '03:21' },
        { id: 2, name: 'rose', content: 'jack, you see you, one day day', time: '03:22' },
        { id: 3, name: 'tom', content: 'jack,。。。。。', time: '03:23' }
    ]
    const root = ReactDOM.createRoot(document.querySelector('#root'))
    let vdom;

    if (list.length) {
        vdom = (
            <ul>
                {list.map(user => (
                    <li key={user.id}>
                        <a href="" onClick={(e)=>e.preventDefault()}>
                            <h3 style={{fontSize:25}}>{user.name}</h3>
                            <p className="c1" onClick={()=>{
                                alert(user.time)
                            }}>{user.content}</p>
                        </a>
                    </li>
                ))}
            </ul>
        )
    } else {
        vdom = <h3>暂无评论</h3>
    }

    root.render((
        <>
            {vdom}
        </>
    ))
</script>

</html>